<template>
  <el-dialog
    :visible="dialogVisible"
    :fullscreen="fullscreen"
    :width="dialogSize.width"
    :top="dialogSize.top"
    :close-on-click-modal="closeOnClickModal"
    @close="onClose">
    <template slot="title">
      <span>{{ title }}</span>
    </template>
    <div :style="`height: ${dialogSize.height}`" class="content-box">
      <slot></slot>
    </div>
    <div class="footer-box">
      <slot name="footer">
        <el-button @click="onClose">关闭</el-button>
        <el-button type="primary" @click="onClose">确定</el-button>
      </slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PageDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '弹框'
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    // 弹框尺寸： small-小 normal-正常 large-巨大
    size: {
      type: String,
      default: 'normal'
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        // 通过.sync修饰符传值可以使用
        this.$emit('update:visible', val);
        // 通过v-model传值需要触发默认的input事件
        // this.$emit('input', val);
      },
      get() {
        return this.visible;
      }
    },
    dialogSize() {
      const sizeEnum = {
        'fullscreen': {
          width: '100%',
          height: 'calc(100vh - 40px - 40px - 2px)',
          top: '0'
        },
        'small': {
          width: '600px',
          height: '300px',
          top: '15vh'
        },
        'normal': {
          width: '800px',
          height: '500px',
          top: '10vh'
        },
        'large': {
          width: '1200px',
          height: '600px',
          top: '10vh'
        }
      };
      if (this.fullscreen) {
        return sizeEnum['fullscreen'];
      } else {
        return sizeEnum[this.size];
      }
    }
  },
  methods: {
    onClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped lang="scss">
.fullscreen-height {
  height: calc(100vh - 40px - 40px - 2px);
}
.content-box {
  // padding: 10px 15px;
  background: #fff;
  background: rgb(240, 242, 245);
  overflow: auto;
}
.footer-box {
  height: 40px;
  line-height: 40px;
  text-align: right;
  padding: 0 15px;
  border-top: 1px solid #e8e8e8;
}
</style>
